<script lang="tsx">
import type { PropType } from "vue";
import { defineComponent, h } from "vue";
import type { SchemaValueType } from "@layui/json-schema-form/types/component/form/types";
import { isString } from "@/utils";

interface SchemaValue extends SchemaValueType {
  [key: string]: any;
}

export default defineComponent({
  props: {
    schemaValue: {
      type: Object as PropType<SchemaValue>,
      default: () => ({})
    },
    model: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const { schemaValue, model } = props;

    // 先判断是否为初始化string类型，format为array
    model[schemaValue.columnCode] =
      (isString(model[schemaValue.columnCode]) &&
        model[schemaValue.columnCode]?.split(",")) ||
      (model[schemaValue.columnCode] ?? []);

    const handleInput = (index, e) => {
      // 是否为整数输入框
      const isInt = (schemaValue.disType || schemaValue.eleDisType) === "40";

      const intValue = !Number(e) ? '': e.split(".")[0]

      model[schemaValue.columnCode]?.splice(
        index,
        1,
        isInt ? intValue : e,
      );
    };

    return () => {
      if (schemaValue.type === "input") {
        return (
          <div class={"custom-rang"} >
            <lay-input
              {...schemaValue.props}
              {...schemaValue.listeners}
              modelValue={model[schemaValue.columnCode][0]}
              onUpdate:modelValue={(e) => handleInput(0, e)}
            ></lay-input>
            <lay-input
              {...schemaValue.props}
              {...schemaValue.listeners}
              modelValue={model[schemaValue.columnCode][1]}
              onUpdate:modelValue={(e) => handleInput(1, e)}
            ></lay-input>
          </div>
        );
      }

      if (schemaValue.type === "date") {
        return (
          <Lay-date-picker
            range={true}
            {...schemaValue.props}
            v-model={model[schemaValue.columnCode]}
          ></Lay-date-picker>
        );
      }
    };
  },
});
</script>
